<template>
    <div class="dashboard-container">
        <div v-show="showFlag">
            <my-search :fields="fieldsList" :baseNumber="12" @onSearch="searchForm" @onReset="resetForm" :selectIsAddAll="false"></my-search>

            <div class="table-list">
                <my-table v-loading="loading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="tableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :height="$store.state.app.windowHeight - 285" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" :totalPage="total" highlight-current-row :ifSelect="false" />
            </div>
        </div>

        <el-dialog title="税收变化趋势" :visible.sync="dialogVisible" append-to-body width="840px" destroy-on-close top="6vh">
            <Echart :id="myEchart" :option="option" :height="$store.state.app.windowHeight - 200 + 'px'" :width="'100%'" />
        </el-dialog>

    </div>
</template>

<script>

import { queryPageList, statistics, exportData } from '@/api/cxtj/zdsygl'
import { hylx } from '@/api/common'
import { downloadFile } from "@/utils/utils"
import Echart from '@/components/echart'
export default {
    name: 'qyssqsfx-list',
    components: {
        Echart
    },
    data() {
        return {
            loading: false,
            tjloading: false,
            showFlag: true,
            dialogVisible: true,
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                legend: {
                    data: ['税额', '增长率']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '税额',


                        // interval: 50,
                        axisLabel: {
                            formatter: '{value} 万元'
                        }
                    },
                    {
                        type: 'value',
                        name: '增长率',
                        splitLine: {
                            show: false
                        },
                        // interval: 5,
                        axisLabel: {
                            formatter: '{value} %'
                        }
                    }
                ],
                series: [
                    {
                        name: '税额',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 万元';
                            }
                        },
                        data: [

                        ]
                    },

                    {
                        name: '增长率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' %';
                            }
                        },
                        data: []
                    }
                ]

            },
            myEchart: '',
            fieldsList: [
                {
                    label: '纳税人名称',
                    field: 'nsrmc',
                    type: 'text',
                    value: ''
                },
                {
                    label: '纳税人识别号',
                    field: 'nsrsbh',
                    type: 'text',
                    value: ''
                },


                {
                    label: '所属省份',
                    field: 'sssf',
                    type: 'select',
                    value: '',
                    multiple: false,
                    options: []
                },
                {
                    label: '企业类型',
                    field: 'qylx_dm',
                    type: 'select',
                    value: '',
                    multiple: false,
                    options: [
                        {
                            value: '11',
                            label: '千户集团'
                        },
                        {
                            value: '2',
                            label: '省局列名'
                        },
                        {
                            value: '3',
                            label: '市局列名'
                        },
                    ]
                },
                {
                    label: '税种',
                    field: 'zbx',
                    type: 'select',
                    value: '',
                    multiple: false,
                    options: []
                },
                {
                    label: '年度范围',
                    field: 'date',
                    type: 'yearrange', // daterange
                    value: [],
                    options: [
                        {
                            field: 'ksnd',
                            value: ''
                        },
                        {
                            field: 'jsnd',
                            value: ''
                        }
                    ],
                    change: value => {
                        // this.changxm(value);
                    }
                },

                {
                    label: '同比增长率',
                    field: 'zbx',
                    type: 'percentageRange',
                    value: [],
                    options: [
                        {
                            field: 'ksnd',
                            value: ''
                        },
                        {
                            field: 'jsnd',
                            value: ''
                        }
                    ],
                },


            ],

            tableColumns: [
                {
                    label: '纳税人名称',
                    prop: 'nsrmc',
                    align: 'center',
                    width: 180
                },
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',
                    minWidth: 130
                },

                {
                    label: '所属地市',
                    prop: 'hyml_mc',
                    align: 'center',
                    width: 100
                },
                {
                    label: '企业类型',
                    prop: 'hydl_mc',
                    align: 'center',
                    minWidth: 100
                },
                {
                    label: '税种',
                    prop: 'HYZL_MC',
                    align: 'center',
                    width: 100
                },
                {
                    label: '所属期起',
                    prop: 'hyxl_mc',
                    align: 'center',
                    width: 90
                },
                {
                    label: '所属期止',
                    prop: 'hyxl_mc1',
                    align: 'center',
                    width: 90
                },
              
                {
                    label: '操作',
                    prop: 'cz',
                    align: 'center',
                    width: 150,
                     render: (h, params) => {
                        return (
                            <span>
                                <el-button type="text" onClick={() => this.go('detail', params.row)}>趋势</el-button>
                                <el-button type="text" onClick={() => this.go('detail', params.row)}>详情</el-button>
                            </span>
                        );
                    }
                },

            ],

            tableDatas: [],
            ruleForm: {
                hyml_mc: false,
                hdml_mc: false,
                hzml_mc: false,
                hxyml_mc: false,
                sssf: false,
                ssds: false,
                zgswjg_mc: false
            },
            tjtableData: [],
            queryObj: {
                nsrmc: '', //公司名称
                nsrsbh: '',
                nsrzt: '',
                hyml_mc: '',
                hydl_mc: '',
                hyzl_mc: '',
                hyxl_mc: '',
                sfjw: '',
                sssf: '',
                ssds: '',
                zgswjg_dm: '',


                pageNo: 1,
                pageSize: 20
            },
            total: 0,

        }
    },

    mounted() {

        this.gethylx(2, 'DIM_XZQH', " XZQHJC = '1'", "XZQH_DM")  //获取省份
        // this.getTableData();
    },
    methods: {

        searchForm(params) {
            this.queryObj.nsrmc = params.nsrmc || ''
            this.queryObj.nsrsbh = params.nsrsbh || ''
            this.queryObj.nsrzt = params.nsrzt || ''
            this.queryObj.hyml_mc = params.hyml_mc ? this.checkParams(3, params.hyml_mc) : ''
            this.queryObj.hydl_mc = params.hydl_mc ? this.checkParams(4, params.hydl_mc) : ''
            this.queryObj.hyzl_mc = params.hyzl_mc ? this.checkParams(5, params.hyzl_mc) : ''
            this.queryObj.hyxl_mc = params.hyxl_mc ? this.checkParams(6, params.hyxl_mc) : ''
            this.queryObj.sfjw = params.sfjw || ''
            this.queryObj.ssds = params.ssds ? this.checkParams(9, params.ssds) : ''
            this.queryObj.sssf = params.sssf || ''
            this.queryObj.zgswjg_dm = params.zgswjg_dm || ''

            this.getTableData();
        },
        checkParams(index, str) {
            let arrList = this.fieldsList[index].options
            for (let i = 0; i < arrList.length; i++) {
                if (arrList[i].value == str) {
                    return arrList[i].label
                }
            }
        },
        resetForm() {
            for (let key in this.queryObj) {
                if (key == 'pageNo') {
                    this.queryObj[key] = 1;
                } else if (key == 'pageSize') {
                    this.queryObj[key] = 20;
                } else {
                    this.queryObj[key] = '';
                }
            }
            // this.tableDatas = []
            // this.total = 0

        },
        getTableData() {
            this.loading = true
            let params = {
                nsrmc: this.queryObj.nsrmc,
                nsrsbh: this.queryObj.nsrsbh,
                nsrzt: this.queryObj.nsrzt,
                hyml_mc: this.queryObj.hyml_mc,
                hydl_mc: this.queryObj.hydl_mc,
                hyzl_mc: this.queryObj.hyzl_mc,
                hyxl_mc: this.queryObj.hyxl_mc,
                sfjw: this.queryObj.sfjw,
                sssf: this.queryObj.sssf,
                ssds: this.queryObj.ssds,
                zgswjg_dm: this.queryObj.zgswjg_dm,


                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
                qylx_dm: 11,
                sfzb: 'N'
                // sfssgs: this.queryObj.sfssgs ? 'Y' : '',
                // jtxxk: this.queryObj.jtxxk ? 'Y' : '',
            }
            queryPageList(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableDatas = res.data.records
                    this.total = res.data.total
                }
            })
        },
        gethylx(index, tableName, where, orderBy) {
            hylx({
                "tableName": tableName,
                "where": where,
                "orderBy": orderBy
                // "tableName": "dm_gy_hy",
                // "where": " mlbz = 'Y'",
                // "orderBy": "hy_dm"
            }).then(res => {
                console.log(res)
                if (res.data.length > 0) {

                    if (index == 2) {
                        this.fieldsList[index].options = res.data.map(item => {
                            return { value: item.NSRZTMC, label: item.NSRZTMC }
                        })
                    } else if (index == 8) {
                        this.fieldsList[index].options = res.data.map(item => {
                            return { value: item.XZQHMC, label: item.XZQHMC }
                        })
                    } else if (index == 9) {
                        this.fieldsList[index].options = res.data.map(item => {
                            return { value: item.XZQH_DM, label: item.XZQHMC }
                        })
                    } else if (index == 10) {
                        this.fieldsList[index].options = res.data.map(item => {
                            return { value: item.SWJG_DM, label: item.SWJGMC }
                        })
                    } else {
                        this.fieldsList[index].options = res.data.map(item => {
                            return { value: item.HY_DM, label: item.HYMC }
                        })
                    }
                }
            })

        },





        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },


        statisticsHandle() {
            this.tjloading = true
            let condition = []
            for (let i in this.ruleForm) {

                if (this.ruleForm[i]) {
                    condition.push(i)
                }
            }

            if (condition.length <= 0) {
                this.$message.error('请选择统计类型！')
                this.tjloading = false
                return false
            }
            // let condition = []
            let params = {
                condition: condition.join(','),
                qylx_dm: 11,
                sfzb: 'N'
            }
            console.log(params)

            statistics(params).then(res => {
                this.tjloading = false
                this.tjtableData = res.data
                console.log(res)
            })
        },
        resetRuleForm() {
            for (let key in this.ruleForm) {
                this.ruleForm[key] = false;
            }
            this.tjtableData = []
        },
        switchHandle() {
            this.showFlag = !this.showFlag
            for (let key in this.ruleForm) {
                this.ruleForm[key] = false;
            }
            this.tjtableData = []
        },
        exportDataHandle() {
            let params = {
                nsrmc: this.queryObj.nsrmc,
                nsrsbh: this.queryObj.nsrsbh,
                nsrzt: this.queryObj.nsrzt,
                hyml_mc: this.queryObj.hyml_mc,
                hydl_mc: this.queryObj.hydl_mc,
                hyzl_mc: this.queryObj.hyzl_mc,
                hyxl_mc: this.queryObj.hyxl_mc,
                sfjw: this.queryObj.sfjw,
                sssf: this.queryObj.sssf,
                ssds: this.queryObj.ssds,
                zgswjg_dm: this.queryObj.zgswjg_dm,
                pageNum: this.queryObj.pageNo,
                pageSize: this.queryObj.pageSize,
                qylx_dm: 11,
                sfzb: 'N'
            }
            exportData(params).then(res => {




                const elink = document.createElement("a");
                elink.download = localStorage.getItem('jmFileName') || '千户集团成员企业名单.xlsx';
                elink.style.display = "none";
                elink.href = URL.createObjectURL(res);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href); // 释放URL 对象
                document.body.removeChild(elink);
            })

        },
        currIndex(index) {
            return index + 1;
        },
    }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    padding: 8px;
    .btn {
        padding: 0 0 8px 0;
    }
}
// .container {
//     height: 100%;
//     width: 100%;
//     background-color: #fff;
//     .searchMy {
//         padding: 8px;
//         .searchMy-form {
//             height: 28px;
//         }
//     }
// }
</style>
